<template>
    <FormDlg title="创建证书请求" ref="dlg" @hide="onHide" @show="onShow" @submit="onSubmit" :disabled="errors.any()">
        <div :class="{'form-group': true, 'has-feedback': true,'has-error': errors.has('country')}">
            <label class="col-sm-4 control-label">国家
                <span class="text-red">*</span>
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" ref="gm-req-country" name="country" placeholder="两字符国家代码, 如 CN"
                    v-model.trim="form.country" data-vv-as="国家" v-validate="'required|regex:^[A-Z]{2}$'" @keydown.enter="$refs['gm-req-province'].focus()">
            </div>
        </div>
        <div :class="{'form-group': true, 'has-feedback': true,'has-error': errors.has('province')}">
            <label class="col-sm-4 control-label">省/州
                <!-- <span class="text-red">*</span> -->
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" ref="gm-req-province" name="province"
                    v-model.trim="form.province" data-vv-as="省/州" v-validate="" @keydown.enter="$refs['gm-req-locality'].focus()">
            </div>
        </div>
        <div :class="{'form-group': true, 'has-feedback': true,'has-error': errors.has('locality')}">
            <label class="col-sm-4 control-label">地区
                <!-- <span class="text-red">*</span> -->
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" ref="gm-req-locality" name="locality"
                    v-model.trim="form.locality" data-vv-as="地区" v-validate="" @keydown.enter="$refs['gm-req-organization'].focus()">
            </div>
        </div>
        <div :class="{'form-group': true, 'has-feedback': true,'has-error': errors.has('organization')}">
            <label class="col-sm-4 control-label">组织
                <!-- <span class="text-red">*</span> -->
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" ref="gm-req-organization" name="organization"
                    v-model.trim="form.organization" data-vv-as="组织" v-validate="" @keydown.enter="$refs['gm-req-organizational-unit'].focus()">
            </div>
        </div>
        <div :class="{'form-group': true, 'has-feedback': true,'has-error': errors.has('organizational_unit')}">
            <label class="col-sm-4 control-label">单位
                <!-- <span class="text-red">*</span> -->
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" ref="gm-req-organizational-unit" name="organizational_unit"
                    v-model.trim="form.organizational_unit" data-vv-as="单位" v-validate="" @keydown.enter="$refs['gm-req-email'].focus()">
            </div>
        </div>
        <div :class="{'form-group': true, 'has-feedback': true,'has-error': errors.has('email')}">
            <label class="col-sm-4 control-label">邮件
                <!-- <span class="text-red">*</span> -->
            </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" ref="gm-req-email" name="email"
                    v-model.trim="form.email" data-vv-as="邮件" v-validate="'email'" @keydown.enter="onSubmit">
            </div>
        </div>
    </FormDlg>
</template>

<script>
import FormDlg from 'components/FormDlg.vue'
import $ from 'jquery'

export default {
    props: {
        action: {
            default: '/api/v1/gm/req/export',
        }
    },
    data() {
        return {
            form: this.defForm(),
        }
    },
    components: {
        FormDlg
    },
    methods: {
        defForm() {
            return {
                country: "",
                province: "",
                locality: "",
                organization: "",
                organizational_unit: "",
                email: "",
                common_name: "",
            }
        },
        onHide() {
            this.form = this.defForm();
        },
        onShow() {
            this.errors.clear();
        },
        async onSubmit() {
            var ok = await this.$validator.validateAll();
            if(!ok) {
                var e = this.errors.items[0];
                this.$message({
                    type: 'error',
                    message: e.msg
                })
                $(`[name=${e.field}]`).focus();
                return;
            }
            var u = `${this.action}?country=${this.form.country}`;
            if(this.form.province) {
                u += `&province=${this.form.province}`;
            }
            if(this.form.locality) {
                u += `&locality=${this.form.locality}`;
            }
            if(this.form.organization) {
                u += `&organization=${this.form.organization}`;
            }
            if(this.form.organizational_unit) {
                u += `&organizational_unit=${this.form.organizational_unit}`;
            }
            if(this.form.email) {
                u += `&email=${this.form.email}`;
            }
            if(this.form.common_name) {
                u += `&common_name=${this.form.common_name}`;
            }
            this.$refs['dlg'].hide();
            window.open(u, "_blank");
        },
        show(cn = '') {
            this.errors.clear();
            this.form.common_name = cn || '';
            this.$refs['dlg'].show();
        },
    }
}
</script>
